<template>
  <el-form
    :model="form"
    label-width="70px"
    :rules="rules"
    ref="from"
    class="form"
  >
    <el-form-item prop="link" label="link">
      <el-input v-model="form.link" placeholder="请输入link"> </el-input>
    </el-form-item>
    <!-- ---------------------- -->
    <el-form-item prop="alt" label="alt">
      <el-input v-model="form.alt" placeholder="请输入图片名称"> </el-input>
    </el-form-item>
    <!-- --------------------- -->
    <el-form-item label="图片">
      <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :http-request="upload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <!-- --------------------- -->
    <el-form-item prop="img" label="base64">
      <el-input v-model="form.img" placeholder="图片名称自动转换为base64">
      </el-input>
    </el-form-item>
    <!-- --------------------- -->
    <el-form-item>
      <el-button type="primary" @click="submitForm"> 上传 </el-button>
      <el-button type="primary" @click="reset"> 重置 </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { addswipe } from "../../service/banner.js";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      imageUrl: "",
      form: {
        link: "",
        alt: "",
        img: "",
      },
      rules: {
        link: [
          {
            required: true,
            message: "请输入连接地址",
            trigger: "blur",
          },
        ],
        alt: [
          {
            required: true,
            message: "请输入提示文本",
            trigger: "blur",
          },
        ],
        img: [
          {
            required: true,
            message: "请选择上传图片",
            trigger: "blur",
          },
        ],
        imageUrl: [
          {
            required: true,
            message: "请选择上传图片",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      let formEl = this.$refs.from;
      if (!formEl) return;
      formEl.validate((valid) => {
        if (valid) {
          addswipe(this.form).then((res) => {
            this.$router.push("/home/swipemanage/swipelist");
            this.reset();
          });
        } else {
          return false;
        }
      });
    },
    upload(file) {
      // 图片预览
      this.imageUrl = URL.createObjectURL(file.file);
      let fr = new FileReader();
      fr.readAsDataURL(file.file); //读取文件
      fr.onload = (data) => {
        if (file.file.size / 1024 / 1024 > 1.5) {
          ElMessage({
            type: "error",
            message: "图片不能大于2M",
          });
          return;
        }
        if (
          ![
            "image/jpg",
            "image/gif",
            "image/jpeg",
            "image/webp",
            "image/jfif",
            "image/png",
          ].includes(file.file.type)
        ) {
          ElMessage({
            type: "error",
            message: "图片格式不正确",
          });
          return;
        }
        this.form.img = data.currentTarget.result;
        // 图片预览
        // this.imageUrl = data.currentTarget.result;
      };
    },
    reset() {
      this.form.link = "";
      this.form.alt = "";
      this.form.img = "";
      this.imageUrl = "";
    },
  },
};
</script>

<style scoped>
.form {
  padding: 20px;
  width: 300px;
  border-radius: 5px;
  margin-top: 20px;
  background-color: #f6f6f6;
}
.el-button {
  margin: 0 auto;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
